<script lang="ts" setup>
import AppGetRebateBonusDetail from './AppGetRebateBonusDetail.vue';

// import AppAmountNotify from './AppAmountNotify.vue'

defineOptions({
  name: 'AppGetRebateBonus',
})
const props = withDefaults(defineProps<Props>(), {
  openGetBonusDialog: () => void 0,
  close: () => void 0,
})
interface Props {
  close: (isDestroy: boolean) => void
  openGetBonusDialog: () => void

}
const nuxtApp = useNuxtApp()
const i18n = nuxtApp.$i18n
const { t: $t } = i18n
const { rebateType } = useRebateData()
const { runAsync: runAsyncRebateSum, loading: loadingRebateSum, data: rebateSum } = useRequest(ApiMemberRebateSum)
const { runAsync: runAsyncRebateApply, loading: loadingRebateApply } = useRequest(ApiMemberRebateApply)
const { rebateAutomatic } = useVipInfo()
const { open } = useDialog(AppGetRebateBonusDetail, null, { showHeader: false, bgColor: 'var(--color-bg-black-4)' })


const columns = computed<Column[]>(() => [
  {
    title: $t('currency_type'),
    dataIndex: 'level',
    align: 'center',
    slot: 'currency',
  },
  {
    title: $t('label_type'),
    dataIndex: 'game_type',
    align: 'center',
    slot: 'game_type',
  },
  {
    title: $t('menu_title_settings_bets'),
    dataIndex: 'valid_bet_amount',
    align: 'center',
    slot: 'valid_bet_amount',
  },
  {
    title: $t('amount'),
    dataIndex: 'rebate_amount',
    align: 'center',
    slot: 'rebate_amount',
  },
])

function rowClicked(data: any) {
  closeDialog()
  setTimeout(()=>{
    open({
      currency_id: data.currency_id,
      game_type: Number(data.game_type),
      openGetBonusDialog: props.openGetBonusDialog,
    })
  },0)
}

function applyRebate() {
  if (rebateSum.value?.length) {
    runAsyncRebateApply().then((res) => {
      rebateSum.value = []
      appEventBus.emit(EventBusNames.GET_TIIMEREBATE_SUCCESS)
      if (res && res.length && isArray(res)) {
        props.close && props.close(true)
        // todo
        // message.success({
        //   message: () => {
        //     return h(AppAmountNotify, {
        //       data: res.map(d => ({ currency: d.currency_id, amount: d.rebate_amount })),
        //     })
        //   },
        // })
      }
      else {
        message.success($t('rebate_success_notify'))
      }
    })
  }
  else {
    message.error($t('vip_no_gift_available'))
  }
}

function closeDialog() {
  props.close && props.close(false)
}

await application.allSettled([runAsyncRebateSum()])
</script>

<template>
  <div class="app-realtime-rebate h-full flex flex-col" @touchstart.stop @touchmove.stop>
    <div class="flex justify-between items-center before:size-[1.75rem]">
      <span class="text-sm font-semibold">{{ rebateAutomatic && +rebateAutomatic.automatic === 3 ? $t('real_time_rebate') : $t('vip_water_back') }}</span>
      <BaseButton class="close size-[1.75rem] bg-[#4A5354] center rounded-md" type="none" @click.stop="closeDialog">
        <BaseIcon name="uni-close2" class="text-xs" />
      </BaseButton>
    </div>
    <div class="scroll-y flex flex-col" @touchstart.stop @touchmove.stop>
      <div>
        <BaseTable
          :columns="columns" :data-source="rebateSum ?? []" :loading="loadingRebateSum" :show-out-load="true"
          class="rounded-md"
          style="font-size: 1rem;color:var(--color-text-white-2);"
          @row-click="rowClicked"
        >
          <template #currency="{ record: { currency_id } }">
            <div class="center">
              <AppCurrencyIcon :currency-type="getCurrencyConfigByCode(currency_id)?.name" />
            </div>
          </template>
          <template #game_type="{ record: { game_type } }">
            <span class="text-xs">{{ rebateType[game_type]?.label ?? game_type }}</span>
          </template>
          <template #valid_bet_amount="{ record: { valid_bet_amount, currency_id } }">
            <div class="center">
              <AppAmount :amount="valid_bet_amount" :currency-code="currency_id" :show-icon="false" />
            </div>
          </template>
          <template #rebate_amount="{ record: { rebate_amount, currency_id } }">
            <div class="center">
              <AppAmount class="special-amount" show-color :amount="rebate_amount" :currency-code="currency_id" :show-icon="false" />
            </div>
          </template>
        </BaseTable>
      </div>
    </div>
      <BaseButton :disabled="!(rebateSum && rebateSum.length) || loadingRebateSum" class="w-full mt-4 text-sm" :loading="loadingRebateApply" bg-style="secondary" size="xl" @click="applyRebate">
        {{ $t('one_key_rebate') }}
      </BaseButton>
  </div>
</template>

<style lang="scss" scoped>
.app-realtime-rebate {
  --tg-table-td-padding-x: 0;
  --tg-table-th-padding-x: 0;
  --tg-app-currency-icon-size: 1rem;
  --bc-table-th-font-size: 0.75rem;
  --tg-app-amount-font-size:0.75rem;
  .special-amount{
    --bc-amount-currency-text-color: #24EE89;
  }
}
</style>
